<style>
    .red {
        color: red;
    }

    .switch {
        width: 28px;
        height: 14px;
    }

    .switch small {
        width: 14px;
        height: 14px;
    }

    .switch.checked small {
        left: 13px;
    }
</style>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h1>集成规划向导</h1>
                    <br>
                    <div style="font-size: 20px;">
                        <span>集成计划：{{info.integrationInfo.integration_name}}</span>
                        <span style="margin-left: 3%;">上线日期：{{info.integrationInfo.online_date}}</span>
                    </div>
                    <br>
                    <div style="font-size: 20px;">
                        <span>步骤</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '1']">1</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '2']">2</span>
                        <span style="padding-left: 35px;" ng-class="{true:'red',false:''}[info.index == '3']">3</span>
                    </div>
                </div>
                <div class="box-body" style="margin-top:1px;">
                    <div ng-show="info.index == '1'" style="width: 60%;">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="5%">项目</th>
                                <th width="5%">代号</th>
                                <th width="5%">计划上线日期</th>
                                <th width="5%">负责人</th>
                                <th width="5%">状态</th>
                                <th width="10%">集成开关</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="item" data-ng-repeat="plan in info.plans track by $index">
                                <td>{{plan.plan_name}}</td>
                                <td>{{plan.plan_code}}</td>
                                <td>{{plan.expect_release_date}}</td>
                                <td>{{plan.PM_name}}</td>
                                <td>{{plan.plan_status}}</td>
                                <td>
                                    <switch ng-if="plan.plan_status == 'TO_INTEGRATION'"
                                            data-ng-model="plan.isIntegration"></switch>
                                    <span ng-if="plan.plan_status == 'PLAN_NEW'">
                                        项目尚未转测
                                    </span>
                                    <span ng-if="plan.plan_status == 'INTEGRATIONING'">
                                        项目已集成
                                    </span>
                                    <span ng-if="plan.plan_status == 'BE_CANCEL'">
                                        项目被撤下
                                    </span>
                                    <span ng-if="plan.plan_status == 'HAND_OVER'">
                                        项目已交付运维
                                    </span>
                                    <span ng-if="plan.plan_status == 'ONLINE'">
                                        项目已上线
                                    </span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div ng-show="info.index == '2'" style="font-size: 15px;">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="1%">工程</th>
                                <!--<th width="10%">项目</th>-->
                                <th width="2%">集成项目(当某工程被多个项目包含时,需要选一个项目作为集成目标)</th>
                                <th width="1%">分支</th>
                                <th width="2%">svn地址</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="item" data-ng-repeat="project in info.projects track by $index">
                                <td>{{project.trunk_name}}</td>
                                <!--<td>{{project.planNames}}</td>-->
                                <td>
                                    <span ng-if="project.list.length == 1">{{project.selectPlan.plan_name}}</span>
                                    <select ng-if="project.list.length > 1" data-ng-model="project.selectPlan"
                                            class="form-control"
                                            style="margin-right:20px;width:180px;"
                                            ng-options="plan as plan.plan_name for plan in project.list">

                                    </select>
                                </td>
                                <td>{{project.selectPlan.project_name}}</td>
                                <td>{{project.selectPlan.vcs_path}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div ng-show="info.index == '3'" style="font-size: 15px;">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="5%">项目</th>
                                <th width="10%">工程</th>
                                <th width="5%">主干分支</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="item" data-ng-repeat="project in info.projectStatus track by $index">
                                <td>{{project.plan_name}}</td>
                                <td>{{project.trunk_name}}</td>
                                <td>
                                    <span ng-if="!project.isMerge">{{project.project_name}}</span>
                                    <span ng-if="project.isMerge">被合并</span>

                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <br>
                        <input type="checkbox" data-ng-model="info.isChecked" ng-true-value="true"
                               ng-false-value="false"/>
                        <span>作为项目负责人已经检查完毕</span>
                    </div>
                    <br>
                    <div style="width: 60%;">
                        <button ng-disabled="info.index == '1'" style="margin-left: 10%;" class="btn btn-default"
                                data-ng-click="previousBtn();">Previous
                        </button>
                        <button ng-show="info.index != '3'" style="float: right;margin-right: 10%;"
                                class="btn btn-default" data-ng-click="nextBtn();">Next
                        </button>
                        <button ng-show="info.index == '3'" ng-disabled="!info.isChecked"
                                style="float: right;margin-right: 10%;" class="btn btn-default"
                                data-ng-click="finish();">规划完毕
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script type="text/ng-template" id="projectTemplate.html">
    <a>
        <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
    </a>
</script>
<script type="text/ng-template" id="finish.html">
    <div class="modal-header">
    </div>
    <div class="modal-body">
        <span>规划项目：</span>
        <span data-ng-repeat="plan in info.selectPlans track by $index">
            {{plan.plan_name}},
        </span>
        <br>
        <span>其中,参与合并的项目有：</span>
        <span data-ng-repeat="pro in info.projectStatus track by $index" ng-if="pro.isMerge">
            {{pro.plan_name}}--{{pro.project_name}},
        </span>
        <br>
        <span>集成测试开始时间：</span>
        <span>{{info.integrationInfo.integration_date}}</span>
        <br>
        <span>计划上线时间：</span>
        <span>{{info.integrationInfo.online_date}}</span>
        <br>
        <input type="checkbox" data-ng-model="info.isDeploy" ng-true-value="true" ng-false-value="false"/>
        <span>立即部署集成环境</span>
        <br>
        <input type="checkbox" data-ng-model="info.isEmail" ng-true-value="true" ng-false-value="false"/>
        <span>发送邮件通知QA人员</span>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" type="button" ng-click="cancel()">取消</button>
        <button class="btn btn-primary" type="button" ng-click="submit()">确定</button>
    </div>
</script>